<script lang="ts" setup>
    import { House, ArrowRight, Refresh, SemiSelect, CirclePlus} from "@element-plus/icons-vue"
    import { reactive, ref } from 'vue'
    import { Dept, Vacation_Type } from "../model/index";
    import { onMounted } from "vue";
    import { useRouter } from "vue-router";
    import createAxios from "../request";

    let axios = createAxios();
    let vacation_namee = ref("");
    const router = useRouter();

    let list1:Array<Vacation_Type> = [];
    let tableData = reactive({
            "ree":{
              "vacation_name":"",
              "limitt":0,
            },
            
            "list": list1
        });

    const getData = function (){
        axios({
            url: `/Vacationtypelist`,
            method: "GET"
        }).then((res)=>{
            //请求成功
            tableData.list = res.data;
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
    }

    onMounted(() => {
      getData();
    });

    const add = function (){
        axios({
            url: `/Vacationtype`,
            method: "POST",
            data:tableData.ree
        }).then((res)=>{
            //请求成功
            getData();
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
       
    }
    const refuse = function (vacation_id:number){
        axios({
            url: `/Vacationtypedelete`,
            method: "POST",
            data:vacation_id
        }).then((res)=>{
            //请求成功
            getData();
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
     
    }
    const change = function (vacation_name:string,vacation_id:number){
      let data = reactive({
            "vv":{
              "vacation_name":vacation_name,
              "vacation_id":vacation_id,
            },
        });
        axios({
            url: `/Vacationtypechange`,
            method: "POST",
            data:data.vv
        }).then((res)=>{
            //请求成功
            vacation_namee=ref("");
            getData();
        }).catch((err)=>{
            //请求失败·
            console.log(err);
        })
     
    }
</script>

<template>
  <el-container id="mainView">
    <el-header style="background-color: #272822; color: #E5E5E5; line-height: 60px; font-size: 27px;">假期类型设定</el-header>
    <el-footer style="height: 30px; line-height: 30px; background-color: #4E5246; border-bottom:1px solid #7A7A7A; border-top:1px solid #7A7A7A;">
      <el-breadcrumb :separator-icon="ArrowRight" style="line-height: 30px;">
        <el-breadcrumb-item :to="{ path: '/home/homepage' }"><el-icon><House /></el-icon>首页</el-breadcrumb-item>
        <el-breadcrumb-item>时间管理</el-breadcrumb-item>
        <el-breadcrumb-item>假期类型设定</el-breadcrumb-item>
      </el-breadcrumb>
    </el-footer>
    <el-main style="padding-bottom: 0%;">
    
      <el-popover placement="right" color="#0077F2" style="margin-bottom: 5px":width="400" trigger="click">
      <template #reference>
        <el-button type="primary" color="#0077F2" style="margin-bottom: 5px"><el-icon><CirclePlus /></el-icon>&nbsp;新增</el-button>
      </template>
      名称
      <el-input v-model="tableData.ree.vacation_name" />
      是否受天数限制
      <el-radio-group v-model="tableData.ree.limitt">
      <el-radio value="0" size="large">不受天数类型限制</el-radio>
      <el-radio value="1" size="large">受天数类型限制</el-radio>
    </el-radio-group>
      <div><el-button type="primary" @click="add" color="#0077F2" style="margin-bottom: 5px"><el-icon><CirclePlus /></el-icon>&nbsp;新增</el-button></div>
    </el-popover>
      <el-table :data="tableData.list" style="width: 1500px">
    <el-table-column label="假期类型" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span style="margin-left: 10px">{{ scope.row.vacation_name}}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="是否受天数影响" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          
          <span v-if="scope.row.limitt>0" style="margin-left: 10px">受天数类型限制</span>
          <span v-else-if="scope.row.limitt==0" style="margin-left: 10px">不受天数类型限制</span>
          
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <!-- <el-button @click="agree(scope.row)" type="success" color="#478A24">
                <el-icon>
                  <Refresh />
                </el-icon>&nbsp;修改
              </el-button> -->
              <el-popover placement="right" color="#0077F2" style="margin-bottom: 5px":width="400" trigger="click">
      <template #reference>
        <el-button type="primary" color="#0077F2" style="margin-bottom: 5px"><el-icon><Refresh /></el-icon>&nbsp;修改</el-button>
      </template>
      名称
      <el-input v-model="vacation_namee"/>
      是否受天数限制
      <div><el-button type="primary"  @click="change(vacation_namee,scope.row.vacation_id)" color="#0077F2" style="margin-bottom: 5px"><el-icon><CirclePlus /></el-icon>&nbsp;修改</el-button></div>
    </el-popover>

              <el-button @click="refuse(scope.row.vacation_id)" type="danger" color="#B40B42">
                <el-icon>
                  <SemiSelect />
                </el-icon>&nbsp;删除
              </el-button>
      </template>
    </el-table-column>
  </el-table>
    </el-main>
  </el-container>
</template>
  
<style scoped>
    #mainView {
        height: 100%;
        width: 100%;
    }

    .demo-form-inline .el-input {
    --el-input-width: 220px;
    }

    .demo-form-inline .el-select {
    --el-select-width: 220px;
    }

    .table {
      display: flex;
      justify-content: center;
    }

    .example-basic .el-date-editor {
      margin: 8px;
    }

</style>
  